import React, { Component } from 'react';
import { ScrollView, StyleSheet, Alert } from 'react-native';
import {
  Colors,
  Typography,
  View,
  Text,
  Button,
  StackAggregator,
  Card,
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

export default class StackAggregatorScreen extends Component {
  renderStackItem(content: string, index: number, showButton: boolean = true) {
    return (
      <Card key={index} padding-15 marginB-10>
        <View>
          <Text text70 marginB-5>
            项目 {index + 1}
          </Text>
          <Text text80 grey30>
            {content}
          </Text>
          {showButton && (
            <Button
              label={`按钮 ${index + 1}`}
              size={Button.sizes.small}
              marginT-10
              onPress={() => console.log(`项目 ${index} 的按钮被点击`)}
            />
          )}
        </View>
      </Card>
    );
  }

  render() {
    const shortTexts = [
      '这是第一个项目的内容',
      '这是第二个项目的内容',
      '这是第三个项目的内容',
    ];

    const longTexts = [
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
      'Lorem Ipsum has been the industry standard dummy text ever since the 1500s.',
      'It has survived not only five centuries, but also the leap into electronic typesetting.',
      'It was popularised in the 1960s with the release of Letraset sheets.',
    ];

    return (
      <ScrollView>
        <TestSuite name="StackAggregator">
          {/* 基础用法 */}
          <TestCase itShould="StackAggregator: 基础用法（默认折叠）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* collapsed */}
          <TestCase itShould="StackAggregator: collapsed=true（折叠状态）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator collapsed={true}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: collapsed=false（展开状态）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator collapsed={false}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* children */}
          <TestCase itShould="StackAggregator: children（单个子项）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator>
                  {this.renderStackItem('单个堆栈项目', 0)}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: children（多个子项）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator>
                  {longTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* containerStyle */}
          <TestCase itShould="StackAggregator: containerStyle（边框和内边距）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  containerStyle={{
                    borderWidth: 2,
                    borderColor: Colors.blue30,
                    borderRadius: 10,
                    padding: 10,
                    backgroundColor: Colors.blue80,
                  }}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: containerStyle（阴影效果）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  containerStyle={{
                    shadowColor: Colors.black,
                    shadowOffset: { width: 0, height: 4 },
                    shadowOpacity: 0.3,
                    shadowRadius: 6,
                    elevation: 8,
                    backgroundColor: Colors.white,
                    borderRadius: 15,
                    padding: 15,
                  }}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* contentContainerStyle */}
          <TestCase itShould="StackAggregator: contentContainerStyle（红色背景）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  contentContainerStyle={{
                    backgroundColor: Colors.red70,
                    borderRadius: 8,
                    padding: 10,
                  }}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: contentContainerStyle（绿色背景）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  contentContainerStyle={{
                    backgroundColor: Colors.green70,
                    borderRadius: 12,
                    padding: 15,
                  }}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* disablePresses */}
          <TestCase itShould="StackAggregator: disablePresses=false（可点击）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  disablePresses={false}
                  onItemPress={(index: number) =>
                    Alert.alert('项目点击', `点击了项目 ${index}`)
                  }>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: disablePresses=true（禁用点击）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  disablePresses={true}
                  onItemPress={(index: number) =>
                    Alert.alert('项目点击', `点击了项目 ${index}`)
                  }>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* itemBorderRadius */}
          <TestCase itShould="StackAggregator: itemBorderRadius=0（无圆角）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator itemBorderRadius={0}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: itemBorderRadius=20（大圆角）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator itemBorderRadius={20}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* buttonProps */}
          <TestCase itShould="StackAggregator: buttonProps（蓝色按钮）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  buttonProps={{
                    color: Colors.blue30,
                    labelStyle: {
                      ...Typography.text70,
                      fontWeight: 'bold',
                    },
                  }}>
                  {longTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: buttonProps（红色小字按钮）">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  buttonProps={{
                    color: Colors.red30,
                    labelStyle: {
                      ...Typography.text80,
                      fontStyle: 'italic',
                    },
                  }}>
                  {longTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* onItemPress */}
          <TestCase itShould="StackAggregator: onItemPress 回调">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  onItemPress={(index: number) => {
                    console.log('项目被点击:', index);
                    Alert.alert('项目点击', `您点击了项目 ${index + 1}`);
                  }}>
                  {shortTexts.map((text, index) =>
                    this.renderStackItem(text, index, false),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* onCollapseChanged */}
          <TestCase itShould="StackAggregator: onCollapseChanged 回调">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  onCollapseChanged={(collapsed: boolean) => {
                    console.log('折叠状态已改变:', collapsed);
                    Alert.alert(
                      '状态改变',
                      collapsed ? '已折叠' : '已展开',
                    );
                  }}>
                  {longTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* onCollapseWillChange */}
          <TestCase itShould="StackAggregator: onCollapseWillChange 回调">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  onCollapseWillChange={(willCollapse: boolean) => {
                    console.log('折叠状态将要改变为:', willCollapse);
                    Alert.alert(
                      '即将改变',
                      willCollapse ? '即将折叠' : '即将展开',
                    );
                  }}>
                  {longTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* 组合示例 */}
          <TestCase itShould="StackAggregator: 复杂组合示例">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator
                  collapsed={false}
                  itemBorderRadius={15}
                  disablePresses={false}
                  containerStyle={{
                    backgroundColor: Colors.purple80,
                    borderRadius: 12,
                    padding: 12,
                  }}
                  contentContainerStyle={{
                    backgroundColor: Colors.purple70,
                    borderRadius: 10,
                    padding: 10,
                  }}
                  buttonProps={{
                    color: Colors.purple30,
                    labelStyle: {
                      ...Typography.text70,
                      fontWeight: '600',
                    },
                  }}
                  onItemPress={(index: number) =>
                    console.log('项目点击:', index)
                  }
                  onCollapseChanged={(collapsed: boolean) =>
                    console.log('折叠状态改变:', collapsed)
                  }
                  onCollapseWillChange={(willCollapse: boolean) =>
                    console.log('即将改变为:', willCollapse)
                  }>
                  {longTexts.map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* 不同数量的子项 */}
          <TestCase itShould="StackAggregator: 2个子项">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator>
                  {shortTexts.slice(0, 2).map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          <TestCase itShould="StackAggregator: 5个子项">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator>
                  {[...longTexts, '第五个项目的内容'].map((text, index) =>
                    this.renderStackItem(text, index),
                  )}
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>

          {/* 自定义内容 */}
          <TestCase itShould="StackAggregator: 自定义卡片内容">
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              <View style={{ width: 600 }} padding-20>
                <StackAggregator itemBorderRadius={12}>
                  <Card padding-20 marginB-10 bg-blue70>
                    <Text text60 blue10>
                      自定义卡片 1
                    </Text>
                    <Text text80 marginT-5>
                      这是一个带有自定义样式的卡片
                    </Text>
                  </Card>
                  <Card padding-20 marginB-10 bg-green70>
                    <Text text60 green10>
                      自定义卡片 2
                    </Text>
                    <Text text80 marginT-5>
                      每个卡片可以有不同的样式
                    </Text>
                  </Card>
                  <Card padding-20 marginB-10 bg-orange70>
                    <Text text60 orange10>
                      自定义卡片 3
                    </Text>
                    <Text text80 marginT-5>
                      支持完全自定义的内容
                    </Text>
                  </Card>
                </StackAggregator>
              </View>
            </ScrollView>
          </TestCase>
        </TestSuite>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});